<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="70%" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-container>
            <el-main>
                <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="110px" label-position="right" style="height:630px;overflow:auto">
                    <el-row :gutter="1">
                        <el-col :span="8">
                            <el-form-item label="工厂货号" prop="factory_number">
                                <el-select v-model="form.factory_number" filterable style="width: 100%" placeholder="请选择" @change="numChange">
                                    <el-option v-for="item in goodsList" :key="item.id" :label="item.factory_number" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="批次号" prop="batch_number">
                                <el-input v-model="form.batch_number" placeholder="请输入批次号" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="首单/加单" prop="type">
                                <el-select v-model="form.type" placeholder="请选择首单/加单" style="width:100%">
                                    <el-option label="首单" :value="0"></el-option>
                                    <el-option label="加单" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" >
                        <el-col :span="8">
                            <el-form-item label="客户" prop="client_id">
                                <el-select v-model="form.client_id"  filterable style="width: 100%" placeholder="请选择客户" clearable @change="clientChange">
                                    <el-option v-for="item in customList" :key="item.id" :label="item.referred_as" :value="item.custom_id + '-' +  item.id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="SKC" prop="skc">
                                <el-input v-model="form.skc" placeholder="请输入SKC" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="品牌" prop="brand_id">
                                <el-select v-model="form.brand_id"  filterable style="width: 100%" placeholder="请选择品牌" disabled>
                                    <el-option v-for="item in PingList" :key="item.id" :label="item.brand_name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" >
                        <el-col :span="8">
                            <el-form-item label="商品类别" prop="goods_cate">
                                <el-select v-model="form.goods_cate"  filterable style="width: 100%" placeholder="请选择商品类别" disabled>
                                    <el-option v-for="item in typeList" :key="item.id" :label="item.title" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="成分" prop="component">
                                <el-select v-model="form.component" filterable placeholder="请选择成分" style="width:100%" disabled>
                                    <el-option v-for="item in componentList" :key="item.id" :label="item.component_name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" >
                        <el-col :span="8">
                            <el-form-item label="订单号" prop="order_no">
                                <el-input v-model="form.order_no" placeholder="请输入订单号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订单交期" prop="deliver_time">
                                <el-date-picker v-model="form.deliver_time" :value-format="'YYYY-MM-DD'" type="data" style="width:100%" placeholder="请选择订单交期" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="紧急" prop="order_label">
                                <el-switch v-model="form.order_label" :active-value="1" :inactive-value="0"></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1">
                        <el-col :span="8">
                            <el-form-item label="工厂" prop="supplier_id">
                                <el-select v-model="form.supplier_id"  filterable style="width: 100%" placeholder="请选择工厂" clearable @change="supChange">
                                    <el-option v-for="item in applyList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="工厂价格" prop="factory_money">
                                <el-input v-model="form.factory_money" placeholder="请输入工厂价格" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-col :span="8">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入备注" clearable type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-row :gutter="1">
                        <el-col :span="8">
                            <sc-form-table ref="table" v-model="form.size_data" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd show-summary>
                                <el-table-column prop="size" label="尺码" width="180"></el-table-column>
                                <el-table-column prop="num" label="数量" min-width="180">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.num" placeholder="请输入下单数量"></el-input>
                                    </template>
                                </el-table-column>
                            </sc-form-table>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="历史下单记录">
                                <scTable ref="table" :data="tableList" border height="300" hideDo hidePagination>
                                    <el-table-column label="工厂" fixed prop="apply_name" align="center" width="120"></el-table-column>
                                    <el-table-column label="价格" fixed prop="factory_money" align="center" width="120"></el-table-column>
                                </scTable>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品主图">
                                <el-image class="img" :src="goods_image[0]" :preview-src-list="goods_image" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-main>
            <el-footer>
                <div style="display:flex;justify-content: end;">
                    <el-button @click="visible = false">取 消</el-button>
                    <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">确定</el-button>
                </div>
            </el-footer>
        </el-container>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '添加订单',
				edit: '编辑订单',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
            apiObj: this.$API.basic.apply.lists,
			//表单数据
            form: {
                id:"",
                supplier_id:"",
                factory_number:"",
                batch_number:"",
                factory_money:"",
                type:"",
                client_id:"",
                goods_id:"",
                skc:"",
                brand_id:"",
                goods_cate:"",
                component:"",
                deliver_time:"",
                order_label:0,
                size_data:[],
                remark:"",
            },
            factory_number:"",
            //验证规则
            rules: {
                factory_number: [
                    {required: true, message: '请选择'}
                ],
                order_no: [
                    {required: true, message: '请输入订单号'}
                ],
                supplier_id: [
                    {required: true, message: '请选择工厂'}
                ],
                factory_money: [
                    {required: true, message: '请输入工厂价格'}
                ],
                deliver_time: [
                    {required: true, message: '请选择订单交期'}
                ],
            },
            addTemplate:{
                size:"",
                num:""
            },
            PingList:[],
            customList:[],
            typeList:[],
            applyList: [],
            goodsList:[],
            componentList:[],//成分
            tableList:[],
            goods_image:[],
		}
	},
	mounted() {
        this.getPing()
        this.getType()
        this.getApply()
        this.getGoodsNumList()
        this.getComponent()
    },
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
        submit() {
            this.form.client_id = this.form.client_id.split('-')[0]
            this.$refs.dialogForm.validate(async (valid) => {
            if (valid) {
                this.isSaveing = true;
                var res = [];
                this.form.factory_number = this.factory_number
                if (this.form.id) {
                    res = await this.$API.order.getOrder.edit.post(this.form);
                } else {
                    res = await this.$API.order.getOrder.add.post(this.form);
                }
                this.isSaveing = false;
                if (res.code == 1) {
                    this.$emit('success', this.form, this.mode)
                    this.visible = false;
                    this.$message.success("操作成功")
                } else {
                    this.$alert(res.message, "提示", { type: 'error' })
                }
                } else {
                    return false;
                }
            })
		},
        //表单注入数据
		async setData(data) {
			this.form.id = data.id
			this.form.supplier_id = data.supplier_id
			this.form.factory_number = data.goods_id
			this.form.goods_id = data.goods_id
            this.factory_number = data.factory_number
			this.form.batch_number = data.batch_number
			this.form.type = data.type
			this.form.skc = data.skc
			this.form.brand_id = data.brand_id
			this.form.goods_cate = data.goods_cate
			this.form.component = Number(data.component)
			this.form.order_no = data.order_no
			this.form.deliver_time = data.deliver_time
			this.form.order_label = data.order_label
			this.form.supplier_id = data.supplier_id
			this.form.factory_money = data.factory_money
			this.form.size_data = data.orderDetail
			this.form.remark = data.remark
            data.orderDetail.map((item,index)=>{
                this.form.size_data.map((item1,index1)=>{
                    if(index==index1){
                        item1.size = item.goods_size
                        item1.num = item.num
                    }
                })
            })
            var res = await this.$API.goods.getGoods.detail.get({id:data.goods_id});
            if(!data.id){
                this.form.batch_number = res.data.new_batch_number
            }
            res.data.customList.map(item=>{
                this.customList.push({
                    id:item.id,
                    custom_id:item.custom_id,
                    apply_name:item.apply_name,
	                referred_as:item.referred_as,
                    skc:item.skc
                })
            })
			this.form.client_id = data.last_order_client_id
            this.goods_image = res.data.goods_image_item_arr
            var datas = await this.$API.order.getOrder.getHistory.get({factory_number:data.factory_number});
            this.tableList = datas.data
		},
        // 所有品牌
        async getPing(){
            var res = await this.$API.all.brand.get();
            this.PingList = res.data;
        },
        // 所有类别
        async getType(){
            var res = await this.$API.all.type.get();
            this.typeList = res.data;
        },
        // 获取工厂
        async getApply(){
            var res = await this.$API.all.Apply.get({type:1});
            this.applyList = res.data;
        },
        // 所有成分
        async getComponent(){
            var res = await this.$API.all.component.get();
            // this.componentList = res.data;
            let array = []
            res.data.map(item=>{
                array.push({
                    id:item.id,
                    component_name: item.component_detail != "" ? item.component_name + " + " + item.component_detail : item.component_name
                })
            })
            this.componentList = array
        },
        // 获取工厂货号
        async getGoodsNumList(){
            var res = await this.$API.all.goodsNumber.get();
            // this.goodsList = res.data;
            let array = []
            res.data.map(item=>{
                array.push({
                    factory_number : item.factory_number + " + " + "("+item.colour+")"  + (item.skc ?" + " + "("+item.skc+")":""),
                    id : item.id
                })
            })
            this.goodsList = array
        },
        async numChange(e){
            this.form.goods_id = e
            this.goodsList.map(x=>{
                if(e==x.id){
                    this.factory_number = x.factory_number
                }
            })
            let customList=[]
            var res = await this.$API.goods.getGoods.detail.get({id:e});
            this.form.batch_number = res.data.new_batch_number
            this.form.type = res.data.type
            this.form.component = res.data.component
            this.form.factory_money = ""
            this.form.supplier_id = res.data.last_order_supplier_id
            res.data.customList.map(item=>{
                customList.push({
                    id:item.id,
                    custom_id:item.custom_id,
                    apply_name:item.apply_name,
                    skc:item.skc,
                    cate_id:res.data.cate_id,
                    brand_id:item.brand_id,
                    component:Number(res.data.component),
                    deliver_time:item.delivery_time,
	                referred_as:item.referred_as
                })
            })
            this.customList = customList
            this.form.client_id = res.data.last_order_client_id
            this.form.skc = res.data.last_order_skc
            this.form.deliver_time = ""
            this.form.size_data = []
            res.data.gross_weight.map(item=>{
                this.form.size_data.push({
                    size:item.size,
                    num:''
                })
            })
            this.clientChange(res.data.last_order_client_id)
            this.goods_image = res.data.goods_image_item_arr
            this.form.goods_cate = res.data.cate_id
            var data = await this.$API.order.getOrder.getHistory.get({factory_number:this.factory_number,goods_id:this.form.goods_id});
            this.tableList = data.data
            this.supChange(res.data.last_order_supplier_id)
        },
        clientChange(e){
            this.form.brand_id = ""
            this.form.skc = ""
            this.form.deliver_time = ""
            this.customList.map(item=>{
                if(e==item.custom_id + '-' + item.id){
                    this.form.skc = item.skc
                    this.form.brand_id = item.brand_id
                    this.form.deliver_time = item.deliver_time
                }
            })
        },
        async supChange(e){
            var data = await this.$API.order.getOrder.getHistory.get({factory_number:this.factory_number,goods_id:this.form.goods_id,supplier_id:e});
            if(data.data!=""){
                this.form.factory_money = data.data[0].factory_money
            }else{
                this.form.factory_money = ""
            }
        },
	}
}
</script>

<style>
.img{
    width: 250px;
    height: 100%;
}
</style>
